<template>
   <div class="allHang">
        <div class="hang" v-show="isCol3" @click="handRingDetails" data-v-7043623d="">
          <div class="one" data-v-7043623d="">
            <div class="zuo" data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
                style="height: 35px; width: 35px; border-radius: 50%"
              />
            </div>
            <div class="you" data-v-7043623d="">
              <div class="y_s" data-v-7043623d="">花花</div>
              <div class="y_x" data-v-7043623d="">
                <div class="y_x_z" data-v-7043623d="">2小时前</div>
                <span class="delSpan" @click="delSpan($event)">删除</span>
                <div class="y_x_y" data-v-7043623d="">来自绘画</div>
              </div>
            </div>
          </div>
          <div class="two" data-v-7043623d="">宝玉宝玉宝玉宝玉</div>
          <div class="three" data-v-7043623d="">
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/1.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/3.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/4.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/1.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/3.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
          </div>
        </div>
      </div>
      <!-- <van-dialog v-model:show="show" title="标题" show-cancel-button>
  <img src="https://unpkg.com/@vant/assets/apple-3.jpeg" />
</van-dialog> -->
    <van-empty description="空空如也..." />
</template>
<script setup lang="ts">
import { Dialog } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";


const router = useRouter()
    const isCol3 = ref(true)
    // const show = ref(true);
    function handRingDetails() {
        router.push({
            name:'handRingDetails'
        }
        )
    }
    function delSpan(e:any) {
      e.stopPropagation()
        console.log("123");
        Dialog.confirm({
          title:'小客提示',
          message:'真的要删除这个手工圈吗？'
        }).then(() =>{
          console.log('queren');
          
        }).catch(() =>{
          console.log("取消");
          
        })
        
    }
</script>
<style scoped>

.hang {
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  background-color: white;
}

.one,
.two,
.three {
  margin: 5px 0px 5px 0px;
}

.three > div {
  width: 28vw;
  height: 100px;
  /* border: 1px solid black; */
  display: inline-block;
  margin: 0px 3px 3px 3px;
}

img {
  width: 29vw;
  height: 100px;
  display: inline-block;
  margin: 0px 3px 3px 3px;
}

.one {
  display: flex;
}

.zuo {
  height: 35px;
  width: 35px;
  border-radius: 50%;
}

.you {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.y_s {
  flex: 1;
  font-size: 15px;
}

.y_x {
  flex: 1;
  display: flex;
  font-size: 10px;
}

.y_x_z {
  color: #a4a4a4;
}

.y_x_y {
  margin-left: 10px;
  color: #a4a4a4;
}

.two {
  font-size: 15px;
  padding-left: 5px;
}
.delSpan{
    margin-left: 10px;
}
</style>